<template>
  <div class="app-container">
    <div style="margin: 20px 0">
      <div style="text-align: center" class="header_box">
          <div class="title">满意度调查</div>
          <div class="sub_title">医疗机构满意度综合评估</div>
       </div>
      <!--  满意度区域  -->
      <el-row :gutter="20">
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="box-card padding-20 ">
              <div class="flex justify-content-space-between" style="gap: 20px">
                <div>
                  <div class="card_title">门诊患者满意度</div>
                  <div class="card_subTitle">当前满意度得分</div>
                </div>
                <img src="@/assets/static/门诊患者满意度.png" alt="" class="card_img">
              </div>
              <div class="score_box">
                <span class="score">92.5</span>
                <span class="unit">分</span>
              </div>
              <div class="charts_common">
                <EchartsComponent :options="chartOptions[0]" style=" height: 100%;"></EchartsComponent>
              </div>
              <div class="list">
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="box-card padding-20 ">
              <div class="flex justify-content-space-between" style="gap: 20px">
                <div>
                  <div class="card_title">住院患者满意度</div>
                  <div class="card_subTitle">当前满意度得分</div>
                </div>
                <img src="@/assets/static/住院患者满意度.png" alt="" class="card_img">
              </div>
              <div class="score_box">
                <span class="score">92.5</span>
                <span class="unit">分</span>
              </div>
              <div class="charts_common">
                <EchartsComponent :options="chartOptions[0]" style=" height: 100%;"></EchartsComponent>
              </div>
              <div class="list">
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="box-card padding-20 ">
              <div class="flex justify-content-space-between" style="gap: 20px">
                <div>
                  <div class="card_title">医务人员满意度</div>
                  <div class="card_subTitle">当前满意度得分</div>
                </div>
                <img src="@/assets/static/医务人员满意度.png" alt="" class="card_img">
              </div>
              <div class="score_box">
                <span class="score">92.5</span>
                <span class="unit">分</span>
              </div>
              <div class="charts_common">
                <EchartsComponent :options="chartOptions[0]" style=" height: 100%;"></EchartsComponent>
              </div>
              <div class="list">
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
                <div class="flex  item">
                  <img src="" alt="" class="icon">
                  <div>挂号体验: 93.2分</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      <!--  满意度区域  -->
      <el-row :gutter="20">
        <!-- 第一列 -->
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="flex-auto  padding-20">
            <div class="charts_common">
              <EchartsComponent :options="chartOptions[1]" style=" height: 100%;"></EchartsComponent>
            </div>
          </el-card>
        </el-col>
        <!-- 第二列 -->
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="flex-auto  padding-20">
            <div class="charts_common">
              <EchartsComponent :options="chartOptions[1]" style=" height: 100%;"></EchartsComponent>
            </div>
          </el-card>
        </el-col>
        <!-- 第三列 -->
        <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="flex-auto  padding-20">
            <div class="charts_common">
              <EchartsComponent :options="chartOptions[1]" style=" height: 100%;"></EchartsComponent>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const chartOptions = ref([
  {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}'
        },
        data: [
          {
            value: 50,
            name: 'SCORE'
          }
        ]
      }
    ]
  },
  {
    title: {
      text: '指标2:特定科室医师比例',
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  }

]);



</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .header_box{
    .title {
      font-size: 24px;
      font-weight: bolder;
      color: #464646;
    }
    .sub_title {
      font-size: 18px;
      color: #858E98;
      margin-top: 10px;
    }
  }
  .el-card {
    border-radius: 13px;
    border: none;
    height: 100%;
  }
  .box-card{
    .card_title{
      font-size: 18px;
      font-weight: bolder;
      color: #464646;
    }
    .card_subTitle{
      font-size: 14px;
      color: #858E98;
      margin-top: 10px;
    }
    .card_img{
      width: 60px;
      display: block;
    }
    .score_box{
      padding-top: 15px;
      .score{
        font-size: 26px;
        font-weight: bolder;
      }
      .unit{
        font-size: 14px;
        color: #858E98;
        padding-left: 5px;
      }
    }
  }
  .charts_common{
      height: 300px;
  }
   .list{
     .item{
       padding: 5px 0;
       .icon{
         width: 20px;
         height: 20px;
         display: block;
         margin-right: 10px;
       }
     }
  }

}

</style>
